<template>
    <div class="sheBeiZhuangTai">
        <div :id="id" class="pie"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            source:[],
        };
    },
    mounted() {
        // this.initCharts();
    },
    methods: {
        initCharts() {
            var myChart = echarts.init(document.getElementById(this.id));
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            var option = {
                legend: {
                    textStyle: {
                        color: "#fff",
                    },
                    left: 'center',
                    top: '0px',
                    show: true,
                    textStyle: {
                        color: "#fff",
                    },
                },
                tooltip: {},
                grid: {
                    top: "20px",
                    left: "70px",
                    right: "0px",
                    bottom: "40"
                },
                dataset: {
                    dimensions: ['product', '停机', '运行', '待机', '故障'],
                    // source: [
                    //     { product: 'S1', '停机': 131, '运行': 91.8, '待机': 164.7, '故障': 114.7 },
                    //     { product: 'S2', '停机': 441.3, '运行': 112.8, '待机': 126.7, '故障': 110.7 },
                    //     { product: 'S3', '停机': 144.3, '运行': 14, '待机': 4.7, '故障': 410.7 },
                    //     { product: 'S4', '停机': 12.3, '运行': 4.8, '待机': 11.7, '故障': 10.7 },
                    //     { product: 'S5', '停机': 12.3, '运行': 4.8, '待机': 4.7, '故障': 180.7 },

                    // ]
                    source:this.source
                },
                xAxis: {
                    type: 'category', axisLabel:
                    {
                        show: true,
                        color: "#ffffff",
                        fontSize: 16,
                    },
                    axisLine: { // 横轴
                        show: true
                    },
    
                    axisLabel: {
                        formatter: function (value) {
                            return value + '设备'
                        }
                    }
                },
                yAxis: {
                    axisLabel: {
                        show: true,
                        color: "#ffffff",
                        fontSize: 16,
                    },
                    axisLine: { // 横轴
                        show: true
                    },
                    splitLine: { // 表格里面Y轴线条
                        show: false
                    },
                    axisLabel: {
                        formatter: function (value) {
                            return `${value} 小时`
                        }
                    }
                },
                series: [{ type: 'bar',label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'top',//在上方显示
                    textStyle: {//数值样式
                        fontSize: '12px',
                        color: '#fff'
                    },
                    formatter: function(value) {
                        return value.data.停机.toFixed(1)
                    }
                } }, 
                { type: 'bar',label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'top',//在上方显示
                    textStyle: {//数值样式
                        fontSize: '12px',
                        color: '#fff'
                    },
                    formatter: function(value) {
                        return value.data.运行.toFixed(1)
                    }
                } }, { type: 'bar',label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'top',//在上方显示
                    textStyle: {//数值样式
                        fontSize: '12px',
                        color: '#fff'
                    },
                    formatter: function(value) {
                        return value.data.待机.toFixed(1)
                    }
                } }, { type: 'bar',label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'top',//在上方显示
                    textStyle: {//数值样式
                        fontSize: '12px',
                        color: '#fff'
                    },
                    formatter: function(value) {
                        return value.data.故障.toFixed(1)
                    }
                } }, 
            ]
            };

            myChart.setOption(option);
        },
    },
};
</script>

<style>
.sheBeiZhuangTai {
    width: 100%;
    height: 100%;
}

.pie {
    width: 100%;
    height: 100%;
    margin-top: 20px;
}
</style>